<template>
  <div class="allMine">
    <ul class="clearfix">
      <li
        v-for="(item, index) in list"
        :key="index"
        :class="{'unSelect': true, 'select': ifSelect === item.name}"
        @click="changeType(item.name)"
      >{{ item.name }}({{item.number}})</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'allMine',
  data () {
    return {
      ifSelect: this.$store.state.project.currentNav
    }
  },
  computed: {
    list () {
      return this.$store.state.project.titleList
    }
  },
  methods: {
    // 获取项目数量
    getProjectCount () {
      this.$store.dispatch('project/getCount')
    },
    // 切换全部和我的
    changeType (name) {
      this.ifSelect = name
      this.$store.state.project.currentNav = name
      if (name === '我的') {
        this.$store.state.project.projectSearchDTO.userId = this.$store.getters.userId
      } else {
        this.$store.state.project.projectSearchDTO.userId = ''
      }
      this.$store.dispatch('project/getList')
    }
  },
  created () {
    // this.changeType('全部')
  }
}
</script>

<style scoped lang="scss">
.allMine {
  width: 100%;
  height: 64px;
  background-color: #fff;
  border-radius: 5px;
  padding-left: 30px;
  ul {
    height: 64px;
    line-height: 64px;
    font-size: 18px;
    li {
      float: left;
      position: relative;
      margin-right: 100px;
      cursor: pointer;
      --user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .select {
      color: #4868FF;
      &::after {
        content: '';
        width: 64px;
        height: 4px;
        background-color: #4868FF;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
      }
    }
  }
}
</style>
